<template>
  <div class="apply-after-sale">
    <card :_Title="i18nText('order.applyForAfterSalesService', '申请售后')"></card>
    <Table
      border
      :columns="columns"
      :data="goodsData"
    >
      <template slot-scope="{ row }" slot="goodsName">
        <div style="padding:5px;display:flex;">
          <img :src="row.image" style="vertical-align: top;" width="60" height="60" alt=""> <span
          class="ml_10">{{ row.goodsName }}</span>
        </div>
      </template>
      <template slot-scope="{ row }" slot="goodsPrice">
        <div>{{ row.applyRefundPrice | unitPrice(i18nText('symbol.currencySymbol', '￥')) }}</div>
      </template>
    </Table>
    <div>
      <Form :model="form" ref="form" class="mt_10" :rules="rules" :label-width="100">
        <FormItem :label="i18nText('order.afterSalesType', '售后类别')">
          <RadioGroup v-model="form.serviceType" @on-change="changeReason" type="button" button-style="solid">
            <Radio v-if="info.returnGoods" label="RETURN_GOODS">{{ i18nText('order.returnAndRefund', '退货退款') }}</Radio>
            <Radio v-if="info.exchangeGoods" label="EXCHANGE_GOODS">{{ i18nText('order.exchange', '换货') }}</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem :label="i18nText('product.quantity', '提交数量')" prop="num">
          <Input type="number" v-model="form.num" style="width:260px"/>
        </FormItem>
        <FormItem :label="i18nText('order.reason', '提交原因')" prop="reason">
          <Select v-model="form.reason" style="width:260px">
            <Option v-for="item in reasonList" :value="item.id" :key="item.id">{{ item.reason }}</Option>
          </Select>
        </FormItem>
        <FormItem :label="i18nText('order.description', '问题描述')" prop="problemDesc">
          <Input type="textarea" :rows="4" maxlength="500" style="width:260px" show-word-limit
                 v-model="form.problemDesc"/>
        </FormItem>
        <FormItem :label="i18nText('common.uploadImage', '图片信息')">
          <div style="display:flex;align-items:center;">
            <div class="demo-upload-list" v-for="(img, index) in uploadList" :key="index">
              <img :src="img">
              <div class="demo-upload-list-cover">
                <Icon type="ios-eye-outline" @click.native="handleView(img)"></Icon>
                <Icon type="ios-trash-outline" @click.native="handleRemove(index)"></Icon>
              </div>
            </div>
            <Upload
              :show-upload-list="false"
              :on-success="handleSuccess"
              :before-upload="handleBeforeUpload"
              :format="['jpg','jpeg','png']"
              :action="action"
              :headers="accessToken"
              style="display: inline-block;width:58px;">
              <div class="hover-pointer icon-upload" style="">
                <Icon type="md-add" size="20"></Icon>
              </div>
            </Upload>
          </div>
          <div class="font-require">{{ i18nText('common.acceptableFormat', '支持格式') }}：jpg,jpeg,png</div>
        </FormItem>
        <FormItem :label="i18nText('common.uploadVideo', '视频信息')">
          <div style="display:flex;align-items:center;">
            <Upload
              :show-upload-list="true"
              :on-success="handleVideoSuccess"
              :before-upload="handleVideoBeforeUpload"
              :format="['mp4','avi', 'mpeg', 'wmv', '3gp', 'rmvb', 'mov', 'flv', 'wemb']"
              :action="action"
              :headers="accessToken"
              max-size="10000"
              style="display: inline-block;width:58px;">
              <Button icon="ios-cloud-upload-outline">Upload files</Button>
              <div class="font-require">{{ i18nText('common.uploadLimitFormat', '大小不能超过10M，支持格式') }}：mp4,avi, mpeg, wmv, 3gp, rmvb, mov, flv, wemb</div>
            </Upload>
          </div>
        </FormItem>
        <FormItem v-if="form.serviceType === 'RETURN_GOODS'" :label="i18nText('order.refundMethod', '退款方式')">
          <div>{{ info.refundWay == 'ORIGINAL' ? i18nText('order.originalPaymentAccount', '原路退回') : '账号退款' }}</div>
        </FormItem>
<!--        <template v-if="info.accountType === 'BANK_TRANSFER' && info.applyRefundPrice != 0">
          <FormItem label="开户行" prop="bankDepositName">
            <Input v-model="form.bankDepositName" type="text" placeholder="请输入银行开户行" style="width:260px"/>
          </FormItem>
          <FormItem label="开户名" prop="bankAccountName">
            <Input v-model="form.bankAccountName" type="text" placeholder="请输入银行开户名" style="width:260px"/>
          </FormItem>
          <FormItem label="银行账号" prop="bankAccountNumber">
            <Input v-model="form.bankAccountNumber" type="text" placeholder="请输入银行账号" style="width:260px"/>
          </FormItem>
        </template>-->
        <FormItem :label="i18nText('order.returnMethod', '返回方式')" v-if="form.serviceType === 'RETURN_GOODS' || form.serviceType === 'EXCHANGE_GOODS'">
          <div>{{ i18nText('order.expressDelivery', '快递至第三方卖家') }}</div>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="apply">{{ i18nText('common.submit', '提交申请') }}</Button>
        </FormItem>
      </Form>
      <Modal title="View Image" v-model="visible">
        <img :src="previewImage" v-if="visible" style="width: 100%">
      </Modal>
    </div>
  </div>
</template>
<script>
import {afterSaleReason, afterSaleInfo, applyAfterSale} from '@/api/member.js'
import {commonUrl} from '@/plugins/request.js';
import storage from '@/plugins/storage';
import * as RegExp from '@/plugins/RegExp'
import {i18nText} from '@/utils/i18n'

export default {
  data() {
    const checkNum = (rule, value, callback) => {
      if (value === '') {
        console.log(RegExp);
        callback(new Error(i18nText('afterSaleOrder.pleaseFillInTheSubmissionQuantity', '请填写提交数量')));
      } else if (value > this.info.num) {
        callback(new Error(i18nText('afterSaleOrder.submittedQuantityCannotExceedPurchasedQuantity', '提交数量不能大于购买数量')));
      } else if (!RegExp.integer.test(value)) {
        callback(new Error(i18nText('afterSaleOrder.submissionQuantityMustPositiveInteger', '提交数量必须为正整数')));
      } else {
        callback();
      }
    };
    return {
      columns: [ // 表格表头
        {title: i18nText('product.productName', '商品名称'), slot: 'goodsName', width: 500},
        {title: i18nText('product.price', '价格'), slot: 'goodsPrice'},
        {title: i18nText('product.quantity', '购买数量'), key: 'num'}
      ],
      goodsData: [], // 商品数据
      reasonList: [], // 售后原因列表
      info: {}, // 售后信息
      form: { // 售后数据
        serviceType: 'RETURN_GOODS',
        num: 1
      },
      uploadList: [], // 上传列表
      uploadVideoList: [], // 上传视频列表
      action: commonUrl + '/common/common/upload/file?isTemp=true', // 上传地址
      accessToken: {}, // 验证token
      visible: false, // 图片预览
      previewImage: '', // 预览图片url
      rules: { // 验证规则
        num: [{validator: checkNum}],
        reason: [{required: true, message: i18nText('afterSaleOrder.pleaseSelectReasonForSubmission', '请选择提交原因')}],
        problemDesc: [{required: true, message: i18nText('afterSaleOrder.pleaseEnterDescriptionOfProblem', '请输入问题描述')}],
        bankAccountNumber: [
          {required: true, message: '请输入银行卡号'},
          {
            type: 'string',
            pattern: /^[0-9]\d*$/,
            message: '请输入正确的银行卡号'
          }
        ],
        bankAccountName: [{required: true, message: '请输入银行开户名'}],
        bankDepositName: [{required: true, message: '请输入银行开户行'}]
      }
    }
  },
  methods: {
    getInfo() { // 获取售后信息
      afterSaleInfo(this.$route.query.sn).then(res => {
        if (res.success) {
          this.info = res.result
          this.goodsData.push(res.result)
          if (!this.info.returnGoods && this.info.returnMoney) {
            this.form.serviceType = 'RETURN_MONEY'
          }
          this.getReason(this.form.serviceType)
        }
      })
    },
    getReason(type) { // 获取售后原因
      afterSaleReason(type).then(res => {
        if (res.success) this.reasonList = res.result
      })
    },
    changeReason(type) { // 改变售后原因列表
      this.getReason(type)
    },
    apply() { // 售后申请提交
      this.$refs.form.validate(valid => {
        if (valid) {
          let params = Object.assign(this.info, this.form)
          params.images = this.uploadList.toString()
          params.videos = this.uploadVideoList.toString()
          params.orderItemSn = this.$route.query.sn
          params.reason = this.reasonList.find(item => item.id == params.reason).reason
          applyAfterSale(params).then(res => {
            if (res.success) {
              this.$Message.success(i18nText('afterSaleOrder.afterSalesApplicationSubmittedCheckIt', '售后申请提交成功，请到售后订单查看！'))
              this.$router.push({name: 'AfterSale'})
            }
          })
        }
      })
    },
    handleView(name) { // 预览图片
      this.previewImage = name;
      this.visible = true;
    },
    handleRemove(index) { // 移除图片
      this.uploadList.splice(index, 1)
      this.$forceUpdate()
    },
    handleSuccess(res, file) { // 上传成功回调
      this.uploadList.push(res.result)
      this.$forceUpdate()
    },
    handleVideoSuccess(res, file) { // 上传成功回调
      this.uploadVideoList.push(res.result)
      this.$forceUpdate()
    },
    handleBeforeUpload() { // 上传之前钩子函数
      const check = this.uploadList.length < 6;
      if (!check) {
        this.$Notice.warning({
          title: i18nText('afterSaleOrder.uploadUp5PicturesOnceTime', '最多可以上传5张图片')
        });
        return check;
      }
    },
    handleVideoBeforeUpload() { // 上传之前钩子函数
      const check = this.uploadVideoList.length < 6;
      if (!check) {
        this.$Notice.warning({
          title: i18nText('afterSaleOrder.uploadUp5VideosOnceTime', '最多可以上传5个视频')
        });
        return check;
      }
    },
  },
  mounted() {
    this.accessToken.accessToken = storage.getItem('accessToken');
    this.getInfo()
  }
}
</script>
<style lang="scss" scoped>

/** 商品信息 */
.order-price {
  text-align: right;
  margin-top: 30px;
  font-size: 16px;
  color: #999;

  > div > span:nth-child(2) {
    width: 130px;
    text-align: right;
    display: inline-block;
    margin-top: 10px;
  }

  .actrual-price {
    color: $theme_color;
    font-weight: bold;
    font-size: 20px;
  }
}

.demo-upload-list {
  display: inline-block;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  margin-right: 4px;
  margin-top: 10px;
}

.demo-upload-list img {
  width: 100%;
  height: 100%;
}

.demo-upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, .6);
}

.demo-upload-list:hover .demo-upload-list-cover {
  display: block;
}

.demo-upload-list-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}

.icon-upload {
  width: 58px;
  height: 58px;
  line-height: 58px;
  text-align: center;
  display: inline-block;
  border: 1px dashed #999;
  border-radius: 4px;
  margin-top: 10px;

  &:hover {
    cursor: pointer;
    border-color: $theme_color;
  }
}

::v-deep .ivu-upload-list {
  width: 500px !important;
}

.font-require {
  color: red;
  width: 500px;
}
</style>
